<template>
  <div class="regulations-section">
    <Header :search="false" :title="title" :is-attach-path="true" leftArrow/>
    <div class="regulations-section-outer">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-cell v-for="(item, index) in list" :key="index" :title="item.name" is-link @click="jump('/regulations-section', item.childrenCode, item.name)"/>
        <van-cell v-for="(item, index) in files" :key="index" :title="item.policyName" @click="goToDetail('/regulations-details',item.id)"/>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import Header from '../../components/Header/NoLeftArrowHeader'
import { getPolicyCatalog } from './../../api/policy'

export default {
  name: 'RegulationsSection',
  components: {
    Header
  },
  data() {
    return {
      list: [],
      files: [],
      title: '',
      isLoading: false
    }
  },
  watch: {
    $route(to) {
      // 对路由变化作出响应...
      if (to.query.catalogCode) {
        this.fetchData(to.query.catalogCode)
        // this.title = to.query.title
      }
      if (to.query.title) {
        this.title = to.query.title
      }
    }
  },
  mounted() {
    const { catalogCode } = this.$route.query

    this.fetchData(catalogCode)

    if (this.$route.query.title) {
      this.title = this.$route.query.title
    }
  },
  methods: {
    async fetchData(catalogCode) {
      const result = await getPolicyCatalog({ catalogCode })
      if (result.catalog) {
        this.list = []
      }

      if (result.file) {
        this.files = []
      }

      this.list = result.catalog
      this.files = result.file

      this.isLoading = false
    },

    onRefresh() {
      const { catalogCode, title } = this.$route.query
      this.fetchData(catalogCode)
      this.title = title
    },

    jump(path, catalogCode, title) {
      this.$router.push({ path, query: { catalogCode, title }})
    },

    goToDetail(path, id) {
      this.$router.push({ path, query: { id }})
    },

    goBack() {
      this.$router.push('/regulations')
    }
  }
}
</script>

<style scoped lang="less">
.regulations-section {
  height: 100%;
  .regulations-section-outer {
    position: fixed;
    top: 46px;
    bottom: 0;
    width: 100%;

    .van-pull-refresh{
      height: 100%;
      overflow: auto;
    }

  }
}

</style>
